<script setup lang="ts">
  import { reactive, ref, watch, onMounted } from 'vue';
  import { getName } from '@/utils/auth';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { getTeamPage, deleteTeam, saveOrUpdateTeam } from '@/api/les';
  import TeamPerson from './teamPerson.vue';

  // 班组表头
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '组别',
      dataIndex: 'teamCategory',
    },
    {
      title: '组名',
      dataIndex: 'teamName',
    },

    {
      title: '班组长',
      dataIndex: 'teamLeader',
    },

    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
    },
  ];
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  // 班组数据
  const teamData = ref<any[]>([]);

  const addTeamModal = ref<boolean>(false);
  const editTeamModal = ref<boolean>(false);
  const addFormRef = ref<any>();
  const editFormRef = ref<any>();
  const createForm = reactive({
    teamCategory: '',
    teamLeader: '',
    teamName: '',
    updateUser: getName(),
    createUser: getName(),
  });
  const updateForm = reactive({
    createUser: getName(),
    lesTeamId: '',
    teamCategory: '',
    teamLeader: '',
    teamName: '',
    updateUser: getName(),
  });
  const rules = {
    teamCategory: [{ required: true, message: '组别不能为空' }],
    teamName: [{ required: true, message: '组名不能为空' }],
    teamLeader: [{ required: true, message: '班组长不能为空' }],
  };
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);
  // 班组长
  const leader = ref<string>('');
  // 类别
  const category = ref<string>('');
  // 组名
  const name = ref<string>('');
  // 班组查询
  async function handleSearch() {
    const data = await getTeamPage({
      current: pageNum.value,
      size: pageSize.value,
      teamCategory: category.value,
      teamLeader: leader.value,
      teamName: name.value,
    });
    teamData.value = data.responseBody.records;
    total.value = data.responseBody.total;
  }
  function reset() {
    leader.value = '';
    category.value = '';
    name.value = '';
    handleSearch();
  }
  // 新增班组
  function addTeam() {
    createForm.teamCategory = '';
    createForm.teamLeader = '';
    createForm.teamName = '';
    addTeamModal.value = true;
  }

  // 保存新增班组
  async function handleBeforeOk(done: any) {
    const status = await addFormRef.value.validate();
    if (status) {
      done(false);
    } else {
      const data = await saveOrUpdateTeam(createForm);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
      }
      handleSearch();
      done();
    }
  }
  // 修改班组
  function onEdit(record: any) {
    updateForm.teamCategory = record.teamCategory;
    updateForm.teamLeader = record.teamLeader;
    updateForm.teamName = record.teamName;
    updateForm.lesTeamId = record.lesTeamId;
    editTeamModal.value = true;
  }

  // 保存班组修改
  async function editOk(done: any) {
    const status = await editFormRef.value.validate();
    if (status) {
      done(false);
    } else {
      const data = await saveOrUpdateTeam(updateForm);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
      }
      handleSearch();
      done();
    }
  }

  // 删除班组
  async function onDel(record: any) {
    const data = await deleteTeam({
      lesTeamId: record.lesTeamId,
    });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    handleSearch();
  }

  const teamId = ref<string>('');

  function tableClick(record: any) {
    teamId.value = record.lesTeamId;
  }

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">班组</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6"> <a-input v-model="name" placeholder="组名" /> </a-col>
      <a-col :span="6">
        <a-input v-model="leader" placeholder="班组长" />
      </a-col>
      <a-col :span="12">
        <div>
          <a-button type="primary" size="large" @click="handleSearch"
            >查询</a-button
          >
          <a-button class="btn-reset" size="large" @click="reset"
            >重置</a-button
          >
          <a-button
            type="primary"
            class="btn-reset"
            size="large"
            @click="addTeam"
          >
            班组添加
          </a-button>
        </div>
      </a-col>
    </a-row>

    <a-divider style="margin-top: 8px; margin-bottom: 8px" />
    <a-table
      :stripe="true"
      class="top-table"
      :columns="columns"
      :data="teamData"
      :pagination="false"
      :scroll="{ y: 400 }"
      style="height: 250px"
      @row-click="tableClick"
    >
      <template #id="{ record }">{{ teamData.indexOf(record) + 1 }}</template>
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="onEdit(record)"
          >修改</a-button
        >
        <a-popconfirm
          content="确定删除吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:pageSize="changeSize"
      />
    </div>
  </a-card>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">班组成员</div>
    </template>
    <TeamPerson :team-id="teamId" />
  </a-card>
  <!-- 班组新增 -->
  <a-drawer
    v-model:visible="addTeamModal"
    :width="500"
    :height="340"
    title="新增班组信息"
    @cancel="() => (addTeamModal = false)"
    @before-ok="handleBeforeOk"
  >
    <a-form
      ref="addFormRef"
      :model="createForm"
      :rules="rules"
      :style="{ width: '450px' }"
    >
      <a-form-item field="teamCategory" label="组别">
        <a-input v-model="createForm.teamCategory" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamName" label="组名">
        <a-input v-model="createForm.teamName" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamLeader" label="班组长">
        <a-input v-model="createForm.teamLeader" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-drawer>
  <!-- 班组修改 -->
  <a-drawer
    v-model:visible="editTeamModal"
    :width="500"
    :height="340"
    title="班组信息修改"
    @cancel="() => (addTeamModal = false)"
    @before-ok="editOk"
  >
    <a-form
      ref="editFormRef"
      :model="updateForm"
      :rules="rules"
      :style="{ width: '450px' }"
    >
      <a-form-item field="teamCategory" label="组别">
        <a-input v-model="updateForm.teamCategory" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamName" label="组名">
        <a-input v-model="updateForm.teamName" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="teamLeader" label="班组长">
        <a-input v-model="updateForm.teamLeader" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style scoped>
  span {
    margin-bottom: 16px;
  }
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
</style>
